<template>
	<view class="order">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">订单</view>
			</template>
		</uv-navbar>
		<view class="tabs">
			<view class="tabs_view">
				<view class="item" :class="active==1?'active':''" @click="changeActive(1)">NFT订单</view>
				<view class="item" :class="active==2?'active':''" @click="changeActive(2)">商城订单</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view class="item" v-for="item in _this.list">
					<view class="label">已完成</view>
					<image :src="item.product_cover" class="cover"></image>
					<view class="item_view">
						<view class="name">【{{item.product_name}}】</view>
						<view class="time">时间:{{item.created_at}}</view>
						<view class="time">订单号:{{item.order_no}}</view>
						<!-- <view class="btn_view">
							<view class="btn_cell">
								<view class="btn confirm">支付</view>
								<view class="btn">取消</view>
							</view>
						</view> -->
					</view>
				</view>
				<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		orderLists,
		shopOrderLists
	} from "@/request/api";
	import {
		ref,
		shallowRef
	} from "vue";
	import useList from "@/hooks/useList.js";
	const {
		_this
	} = useList();
	const active = ref(1);
	const get_nft_list = async () => {
		let {
			list
		} = await orderLists({
			page: _this.page,
			limit: _this.limit,
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	get_nft_list();

	const getList = async () => {
		let {
			list
		} = await shopOrderLists({
			page: _this.page,
			limit: _this.limit,
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};

	const changeActive = (value) => {
		active.value = value;
		_this.list = [];
		_this.page = 1;
		value == 1 ? get_nft_list() : getList();
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		value == 1 ? get_nft_list() : getList();
	};
</script>

<style scoped lang="scss">
	.order {
		.center_slot {
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 800;
		}

		.tabs {
			padding: 0 30rpx;
			box-sizing: border-box;

			.tabs_view {
				width: 100%;
				height: 88rpx;
				border-radius: 44rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				background: #2E2E2E;
				display: flex;
				align-items: center;

				.item {
					width: 335rpx;
					height: 78rpx;
					line-height: 78rpx;
					text-align: center;
					color: #CCCCCC;
					font-size: 32rpx;
					font-weight: bold;
					border-radius: 39rpx;

					&.active {
						color: #333333;
						background: #DDF247;
					}
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navBarHeight} - 88rpx - var(--window-top) - var(--window-bottom));

			.list {
				padding: 30rpx 20rpx 0;
				box-sizing: border-box;

				.item {
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					background: #2E2E2E;
					display: flex;
					position: relative;

					.label {
						color: #666666;
						font-size: 24rpx;
						position: absolute;
						right: 30rpx;
						top: 30rpx;
						z-index: 2;
					}

					.cover {
						width: 200rpx;
						height: 200rpx;
					}

					.item_view {
						flex: 1;
						padding-top: 10rpx;
						padding-left: 30rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							color: #FFFFFF;
							font-size: 32rpx;
							font-weight: 800;
						}

						.time {
							color: #999999;
							font-size: 26rpx;
						}

						.btn_view {
							.btn_cell {
								display: flex;
								justify-content: flex-end;

								.btn {
									width: 150rpx;
									height: 60rpx;
									line-height: 60rpx;
									text-align: center;
									color: #CCCCCC;
									font-size: 28rpx;
									border-radius: 10rpx;
									margin-right: 20rpx;
									background: #444444;

									&:last-child {
										margin-right: 0;
									}

									&.confirm {
										color: #333333;
										background: #DDF247;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>